<template>
<!--    <div class="update-container">-->
<!--        <h2 class="title">更新购物车项</h2>-->
<!--        &lt;!&ndash; 显示商品信息 &ndash;&gt;-->
<!--        <div class="product-info">-->
<!--            <h3>当前购物车商品信息</h3>-->
<!--            <p>购物车项ID: {{ formData.cartItemId }}</p>-->
<!--            <p>用户ID: {{ formData.userId }}</p>-->
<!--            <p>商品项ID: {{ formData.itemId }}</p>-->
<!--            <p>具体产品ID: {{ formData.productId }}</p>-->
<!--            <p>单价: {{ formData.listPrice }}</p>-->
<!--            <p>数量: {{ formData.quantity }}</p>-->
<!--            <p>总价: {{ formData.total }}</p>-->
<!--        </div>-->
<!--        <form @submit.prevent="updateCartItem" class="form">-->
<!--            <div class="form-group">-->
<!--                <label for="cartItemId">购物车项ID:</label>-->
<!--                <input type="text" id="cartItemId" v-model="formData.cartItemId" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="userId">用户ID:</label>-->
<!--                <input type="text" id="userId" v-model="formData.userId" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="itemId">商品项ID:</label>-->
<!--                <input type="text" id="itemId" v-model="formData.itemId" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="productId">具体产品ID:</label>-->
<!--                <input type="text" id="productId" v-model="formData.productId" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="listPrice">单价:</label>-->
<!--                <input type="number" id="listPrice" v-model="formData.listPrice" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="quantity">数量:</label>-->
<!--                <input type="number" id="quantity" v-model="formData.quantity" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="total">总价:</label>-->
<!--                <input type="number" id="total" v-model="formData.total" required>-->
<!--            </div>-->
<!--            <button type="submit" class="submit-button">更新</button>-->
<!--        </form>-->
<!--        <p v-if="message" class="message">{{ message }}</p>-->
<!--        &lt;!&ndash; 添加返回按钮 &ndash;&gt;-->
<!--        <button @click="goBack">返回</button>-->
<!--    </div>-->
</template>

<script setup>
// import { ref, onMounted } from 'vue';
// import { useRouter, useRoute } from 'vue-router';
// import axios from 'axios';
//
// const formData = ref({
//     cartItemId: '',
//     userId: '',
//     itemId: '',
//     productId: '',
//     listPrice: '',
//     quantity: '',
//     total: ''
// });
//
// const message = ref('');
// const router = useRouter();
// const route = useRoute();
//
// // 页面加载时获取商品信息
// onMounted(async () => {
//     try {
//         // 假设通过路由参数传递购物车项ID
//         const cartItemId = route.params.cartItemId;
//         const response = await axios.get(`/cartItem/${cartItemId}`);
//         formData.value = response.data;
//     } catch (error) {
//         message.value = '获取购物车信息失败';
//     }
// });
//
// const updateCartItem = async () => {
//     try {
//         const response = await axios.put('/cartItem', formData.value);
//         message.value = response.data.message;
//     } catch (error) {
//         message.value = '更新失败';p
//     }
// };
//
// // 返回上一页面的方法
// const goBack = () => {
//     router.back();
// };
</script>

<style scoped>
.update-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

.title {
    text-align: center;
    color: #333;
}

.form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.submit-button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}

.message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

.message:empty {
    display: none;
}

.product-info {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

button {
  width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}
</style>